import { App, Directive } from "vue";
const createDragDom = () => {
    const div = `
        <div class='drag-bar' style='position: absolute;right:2px;z-index: 11111;top: 50%;transform:translateY(-50%);
        width:4px;height: 20%;background: #a6a6a6;display:inline-block; cursor:e-resize'>
        </div>
    `
    const range = document.createRange();
    return range.createContextualFragment(div);
}
const dragSizeDirective: Directive = {
    mounted(el, binding) {
        console.log(el)
        
        el.style.position = 'relative'
        el.style.flexShrink = '0'
        const dragBarDom = createDragDom()
        el.appendChild(dragBarDom)
        el.addEventListener('mousedown', (e) => {
            const mousemoveHandler = (e) => {
                let width = el.offsetWidth
                let offsetX = e.movementX
                el.style.width = width + offsetX + 'px'
            }
            if (e.target.className === 'drag-bar') {
                document.addEventListener('mousemove', mousemoveHandler)
                document.addEventListener('mouseup', () => {
                    document.removeEventListener('mousemove', mousemoveHandler)
                })
            }
            
        })
    }
}
export function setupDragSizeDirective(app: App) {
  app.directive('dragSize', dragSizeDirective);
}

export default setupDragSizeDirective